<template>
  <div :id="id ? id : 'video-player'" class="video-player"></div>
</template>
<script>
import Player from "xgplayer";
export default {
  props: {
    id: {
      type: String,
      default: "video-player",
    },
    url: {
      // 父组件传过来的视频链接
      type: String,
      default: "",
    },
  },
  emits: ["triggerEvent", "removeVideo"],
  data() {
    return {
      player: null, //实例
    };
  },
  mounted() {
    // console.log('传过来的url:', this.url);
    // 初始化播放器
    this.initPlayer();
  },
  created() {},
  // 监听播放路径的变化
  watch: {
    url: {
      handler(newValue, oldValue) {
        if (!this.player) {
          this.initPlayer();
          return;
        }
        // 接收到的数据
        console.log(this.url);
        this.player.src = this.url;
      },
    },
  },
  methods: {
    remove() {
      this.$emit("removeVideo", this.url);
    },
    // =========================1，设置播放器必要参数===================
    initPlayer() {
      if (!this.url) return console.warn("url is not esist");
      const config = {
        id: this.id,
        url: this.url,
        fluid: true,
        customFetch: (input, init) => {
          const headers = new Headers(init.headers);
          headers.append(
            "Cookie",
            "ttwid=1%7C4vqOQt_fbJyBLnYDj3-PceptrywvrHr7mFu9ou9-BUQ%7C1726712747%7Ca336efefb4ebbed6f22e1207eb3924910df84b685fbdba91afa1e5273171d311; hevc_supported=true; csrf_session_id=20f63742b159c5edb0f5f7c3f0a87956; fpk1=U2FsdGVkX187WuJGWxc7IV55Go1AMadGji0KPkubfuE5SyDrgVB/796GdPwVaw1kjICrhui3KIFWLwyyfVjv0A==; fpk2=fe0673f2a48d047b912b27e2a0c02f9f; FORCE_LOGIN=%7B%22videoConsumedRemainSeconds%22%3A180%2C%22isForcePopClose%22%3A1%7D; bd_ticket_guard_client_web_domain=2; passport_csrf_token=691241432aacf5378825d579f644a27b; passport_csrf_token_default=691241432aacf5378825d579f644a27b; s_v_web_id=verify_m18o80l3_50745086_f0e4_a4e8_3bfb_0adbf3437c31; download_guide=%222%2F20240919%2F0%22; biz_trace_id=794d4632; passport_assist_user=CkHmxuPObqJcgCg5PepeYgvz6jTjVldfEoWYFHCnIKeny7Atu6qsiS-A3PWuj6JnlYRZpDmoGcO7hRy8vE_uUXvyIRpKCjx2bUokeLQvY1lzEsTzeK1U7111tSqKvr37wBVQfT7oJq2KzHSrZ9joEuB2p0AcrnQQ2Mod2QF0C1ZcP5UQ67_cDRiJr9ZUIAEiAQM5ZHfL; n_mh=YWU8yCoGLpZjom3SqQ1Ylh7b87QnMl2ZnsghqSBcj44; sso_uid_tt=080a412bd88b14c856e515b1a249bef0; sso_uid_tt_ss=080a412bd88b14c856e515b1a249bef0; toutiao_sso_user=edea860c20d014942877aa957d741bdb; toutiao_sso_user_ss=edea860c20d014942877aa957d741bdb; sid_ucp_sso_v1=1.0.0-KDJhMTE4NWMzZjBjZTRkOTA3ODAzMTg3NzgzNzVmZTA4MmVmYzM2YzAKIQiciKCrrPSRBhCema63BhjvMSAMMPausfEFOAZA9AdIBhoCbGYiIGVkZWE4NjBjMjBkMDE0OTQyODc3YWE5NTdkNzQxYmRi; ssid_ucp_sso_v1=1.0.0-KDJhMTE4NWMzZjBjZTRkOTA3ODAzMTg3NzgzNzVmZTA4MmVmYzM2YzAKIQiciKCrrPSRBhCema63BhjvMSAMMPausfEFOAZA9AdIBhoCbGYiIGVkZWE4NjBjMjBkMDE0OTQyODc3YWE5NTdkNzQxYmRi; passport_auth_status=202362c8e2de3182350fb8e4ed403ede%2C; passport_auth_status_ss=202362c8e2de3182350fb8e4ed403ede%2C; uid_tt=299ae76ff282c06dd1089e168aa5a3d4; uid_tt_ss=299ae76ff282c06dd1089e168aa5a3d4; sid_tt=f6e44ff2b12f0e51621a22544fd3a6ab; sessionid=f6e44ff2b12f0e51621a22544fd3a6ab; sessionid_ss=f6e44ff2b12f0e51621a22544fd3a6ab; is_staff_user=false; UIFID=9e5c45806baed1121aef2e4ebdb50ae0783a7b9267143d29acaade7dde1bacd528f624bdc7901468c7ee2a14153f2889541fe551d514d9012111e918769e45f9b6cbc30cea98e8d495910402d74bafe7661f9f9e4a83d7181d567d315d1496fc04eafb376c95cbc63ec5cf9441f87a79ac169b64aa2b0e91dabff96a341c0b4cb327a7472050b6021cbee584de762f9f33a9f8c7a493ac28e79a00a1ae323943; SelfTabRedDotControl=%5B%5D; _bd_ticket_crypt_doamin=2; _bd_ticket_crypt_cookie=bed9c88619bb9478e6af86dbccc1288b; __security_server_data_status=1; sid_guard=f6e44ff2b12f0e51621a22544fd3a6ab%7C1726712997%7C5183996%7CMon%2C+18-Nov-2024+02%3A29%3A53+GMT; sid_ucp_v1=1.0.0-KDhhMWE4YzI2YWM0NDljZjk3ZjYyNTdlMDM5ZjVmYTVhZjY1ZjdkZjUKGwiciKCrrPSRBhClma63BhjvMSAMOAZA9AdIBBoCbHEiIGY2ZTQ0ZmYyYjEyZjBlNTE2MjFhMjI1NDRmZDNhNmFi; ssid_ucp_v1=1.0.0-KDhhMWE4YzI2YWM0NDljZjk3ZjYyNTdlMDM5ZjVmYTVhZjY1ZjdkZjUKGwiciKCrrPSRBhClma63BhjvMSAMOAZA9AdIBBoCbHEiIGY2ZTQ0ZmYyYjEyZjBlNTE2MjFhMjI1NDRmZDNhNmFi; pwa2=%220%7C0%7C3%7C0%22; device_web_cpu_core=8; device_web_memory_size=8; FOLLOW_NUMBER_YELLOW_POINT_INFO=%22MS4wLjABAAAA_tX1RJcqqCVcnmxEInJO92qKQ-CgUayBtneQDEe9H1Ihkz2TKpYb3B0KwXv8nHnK%2F1726761600000%2F0%2F0%2F1726727096647%22; SearchResultListTypeChangedManually=%221%22; volume_info=%7B%22isUserMute%22%3Afalse%2C%22isMute%22%3Afalse%2C%22volume%22%3A0.5%7D; __ac_nonce=066ebd943009b7cdc9582; __ac_signature=_02B4Z6wo00f01SdvlRwAAIDCdZC1BlT-xUEnT5GAAC8ze8; home_can_add_dy_2_desktop=%221%22; FOLLOW_LIVE_POINT_INFO=%22MS4wLjABAAAA_tX1RJcqqCVcnmxEInJO92qKQ-CgUayBtneQDEe9H1Ihkz2TKpYb3B0KwXv8nHnK%2F1726761600000%2F0%2F1726732613258%2F0%22; bd_ticket_guard_client_data=eyJiZC10aWNrZXQtZ3VhcmQtdmVyc2lvbiI6MiwiYmQtdGlja2V0LWd1YXJkLWl0ZXJhdGlvbi12ZXJzaW9uIjoxLCJiZC10aWNrZXQtZ3VhcmQtcmVlLXB1YmxpYy1rZXkiOiJCQ1ZVZjNWSUZnTGQrZG4wTGxRbHpzSGVpeEFqTld4bGlLMnd3RTRCSkRySEl4UUhkSjRwSVRjQitjZVRqZnlPaWNYRDAwZ3NNODhrK1p0SUlQd1c5b0k9IiwiYmQtdGlja2V0LWd1YXJkLXdlYi12ZXJzaW9uIjoxfQ%3D%3D; passport_fe_beating_status=true; publish_badge_show_info=%220%2C0%2C0%2C1726732619928%22; SEARCH_RESULT_LIST_TYPE=%22single%22; odin_tt=2a20a4ee4c8f4b95c5898a9e80f637bece9959c0fc7dd8f3bc7ff75e5c350da1ce28f8d52086cb435d327ddd3a64b6b7; IsDouyinActive=true"
          );
          return fetch(input, { ...init, headers });
        },
        /**倍速播放 */
        playbackRate: [0.5, 0.75, 1, 1.5, 2],
        defaultPlaybackRate: 1,

        playsinline: this.isAppleDevice(), // IOS设备设置，防止被浏览器劫持
        "x5-video-player-type": "h5", // 微信内置浏览器设置，防止被浏览器劫持
        "x5-video-orientation": "portraint",
        /**画中画 */
        pip: true,
        pipConfig: {
          bottom: 100,
          right: 100,
          width: 320,
          height: 180,
        },
        // download: true,
        /**初始化首帧 */
        videoInit: true,
        autoplay: false,
      };
      //========================== 2，开始实例化======================
      const player = new Player(config);

      if (player) {
        this.player = player;
        /* 这里注册监听 */
        // 监听视频开始播放 播放传给父组件的是true
        this.player.on("play", () => {
          this.$emit("triggerEvent", true);
        });
        // 监听视频已经暂停 暂停传给父组件的是true
        this.player.on("pause", () => {
          this.$emit("triggerEvent", false);
        });
        // 监听 视频退出全屏
        this.player.on("exitFullscreen", () => {
          window.scrollTo(0, 0);
          console.log("已经退出全屏了");
        });
      }
    },
    // IOS设备设置，防止被浏览器劫持
    isAppleDevice() {
      const ua = navigator.userAgent.toLowerCase();
      return /iphone|ipad|phone|Mac/i.test(ua);
    },
  },
};
</script>

<style></style>
